<template>
  <div class="Repairinvoice">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <!-- //回库时间 -->
          <a-col :span="8">
            <a-form-item label="回库时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-date-picker v-decorator="['time']" format="YYYY-MM-DD HH:mm:ss"></a-date-picker>
            </a-form-item>
          </a-col>
          <!-- //回库时间  -->

          <!-- 回库状态 -->
          <a-col :span="8">
            <a-form-item label="回库状态" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-select v-decorator="['cruise']" placeholder="全部">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">待处理</a-select-option>
                <a-select-option value="2">已上货</a-select-option>
                <a-select-option value="3">已确认回库</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 回库状态 -->

          <!-- 回库单号 -->
          <a-col :span="8">
            <a-form-item label="回库单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['danhao']" />
            </a-form-item>
          </a-col>
          <!-- 回库单号 -->
        </a-row>

        <!--循柜员 -->
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="巡柜员" :label-col="{ span: 5}" :wrapper-col="{ span: 16,offset:2 }">
              <a-input placeholder="请输入" v-decorator="['xungui']" />
            </a-form-item>
          </a-col>

          <!-- 设备标编号 -->
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16,offset:2 }">
              <a-input placeholder="请输入" v-decorator="['bian']" />
            </a-form-item>
          </a-col>

          <!-- //开始和结束时间 -->
          <!-- <a-col :span="8">
            <a-form-item label="起止时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['startTime', {rules: [{ required: true, message: '请选择起止时间!' }]}
        ]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>-->
          <!-- //开始和结束时间 -->
          <a-col :span="8" :style="{ textAlign: 'right'}">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button
              style="margin: 0 1% ; border-color:rgba(24, 144, 255, 1)"
              @click="listExport()"
            >导出</a-button>
            <a-button @click="handleReset()" style="margin-right:4%">重置</a-button>
            <!-- <a-button type="primary" >创建</a-button> -->
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <!-- //进行下面得表单操作 -->
    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        @change="handleTablePop"
        :dataSource="data"
        :bordered="true"
        :pagination="pagination"
        :rowKey="record => record.code"
      >
        <template slot="name" slot-scope="text" href="javascript:;">{{text}}</template>
        <template slot="action" slot-scope="text,record">
          <template>
            <span class="blue" @click="editpoint(text,record)">编辑</span>
          </template>
          <!-- <router-link to="/home/repertoryadmin/backinvoice/editinvoice">
            <a href="javascript:;">编辑</a>
          </router-link>-->
          <a-divider type="vertical" />
          <!-- <router-link to="/home/repertoryadmin/backinvoice/detailinvoice"> -->
          <template>
            <span class="blue" @click="datailInfo(text,record)">详情</span>
          </template>
          <!-- </router-link> -->
        </template>
        <!-- //把库存状态转化文字形式 -->
        <template slot="repaireStatus" slot-scope="text,record">
          <span>{{record.status==1?"待回库":"已确认回库"}}</span>
        </template>
      </a-table>
    </a-card>
    <!-- //进行下面得表单操作 -->
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "code",
    title: "回库单号",
    align: "center",
    //   slots: { title: 'customTitle' },
    scopedSlots: { customRender: "name" }
  },
  {
    dataIndex: "createTime",
    title: "回库时间",
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    align: "center"
  },
  {
    dataIndex: "employeeName",
    title: "巡柜员",
    align: "center"
    //   scopedSlots: { customRender: 'tags' },
  },
  {
    title: "回库状态",
    dataIndex: "status",
    align: "center",
    scopedSlots: { customRender: "repaireStatus" }
  },

  {
    title: "操作",
    align: "center",
    scopedSlots: { customRender: "action" }
  }
];

//指的是表格里面的数据--并对此数据进行遍历
const data = [
  {
    key: "1"
  }
];
// const data = [{
//   key: '1',
//   name: 'John Brown',
//   age: 32333,
//   address: 'New York No. 1 Lake Park',
//   tags: ['nice', 'developer'],
// }, {
//   key: '2',
//   name: 'Jim Green',
//   age: 42,
//   address: 'London No. 1 Lake Park',
//   tags: ['loser'],
// }, {
//   key: '3',
//   name: 'Joe Black',
//   age: 32,
//   address: 'Sidney No. 1 Lake Park',
//   tags: ['cool', 'teacher'],
// }];

export default {
  data() {
    return {
      expand: false,
      form: this.$form.createForm(this),
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      data: [],
      columns
    };
  },
  computed: {},
  methods: {
    //重置方法
    handleReset() {
      this.form.resetFields();
    },
    //分页可以点击的方法
    handleTablePop(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      //必须要查询
      this.search();
    },
    //回货单的查询方法
    search() {
      //组件中的内置的方发获取values的值
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/inboundOrder/search", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          code: values.danhao,
          createTime: values.time,
          devCode: values.bian,
          employeeName: values.xungui,
          status: values.cruise
        })
        .then(response => {
          //成功后的回调函数
          this.data = response.data.data.list;
          //总条数-每一页的条数-当前的数
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },
    //回货单的查询方法

    //回货单的导出方法
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/inboundOrder/export",
          {
            loginToken: this.$store.state.loginToken,
            code: values.danhao,
            createTime: values.time,
            devCode: values.bian,
            employeeName: values.xungui,
            status: values.cruise
          },
          //导出的时候必须要改成这个格式--否则无法导出
          { responseType: "arraybuffer" }
        )
        .then(response => {
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "回货单表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //回货单的导出方法

    //回货单详情跳页传id
    datailInfo(text, record) {
      // loginToken:this.$store.state.loginToken;
      //回货dan id
      var inboundOrderId = record.inboundOrderId;
      //补货单id
      var replenishmentOrderId = record.replenishmentOrderId;
      //备注
      var remark = record.remark;
      //状态
      var status = record.status;
      //时间
      var replenishmentTime = record.replenishmentTime;
      //设备
      var devCode = record.devCode;
      //地址
      var posAddr = record.posAddr;
      //巡柜员
      var employeeName = record.employeeName;
      //存储俩个id到vuex中 --之后可以拿出来是使用
      this.$store.commit("inboundOrderId", inboundOrderId);
      this.$store.commit("replenishmentOrderId", replenishmentOrderId);
      this.$store.commit("remark", remark);
      this.$store.commit("replenishmentTime", replenishmentTime);
      this.$store.commit("devCode", devCode);
      this.$store.commit("posAddr", posAddr);

      this.$router.push({
        path: "/home/repertoryadmin/backinvoice/detailinvoice"
      });
    },
    //回货单编辑传id
    editpoint(text, record) {
      var inboundOrderId = record.inboundOrderId;
      var replenishmentOrderId = record.replenishmentOrderId;
      var replenishmentTime = record.replenishmentTime;
      var employeeName = record.employeeName;
      var backStatus = record.status;
      var devCode = record.devCode;
      var posAddr = record.posAddr;
      var remark = record.remark;
      this.$store.commit("inboundOrderId", inboundOrderId);
      this.$store.commit("replenishmentOrderId", replenishmentOrderId);
      this.$store.commit("replenishmentTime", replenishmentTime);
      this.$store.commit("employeeName", employeeName);
      this.$store.commit("backStatus", backStatus);
      this.$store.commit("devCode", devCode);
      this.$store.commit("posAddr", posAddr);
      this.$store.commit("remark", remark);
      this.$router.push({
        path: "/home/repertoryadmin/backinvoice/editinvoice"
      });
    }
  },
  created() {
    this.search();
  }
};
</script>

<style scoped>
.Repairinvoice {
  width: 100%;
}
</style>
